<template>
  <div class="mine">
    <div class="header">
      <div class="head-img">
        <div v-if="!userInfo.username" class="Nlogin">
          <a-avatar :size="64" icon="user" />
          <a @click="Login()">登录/注册</a>
        </div>
        <div class="login" v-else>
          <a-avatar :size="64" icon="user" :src="userInfo.img" />
          <b id="username">{{ userInfo.username }}</b>
          <b><p id="userphone">{{userInfo.phone}}</p></b>
        </div>
      </div>
      <div class="icon">
        <span @click="Kefu()" id="kefu" class="iconfont icon-kefu1"></span>
        <span @click="Xiaoxi()" id="xiaoxi" class="iconfont icon-xiaoxi"></span>
      </div>
    </div>
    <div class="account">
      <div id="yue">
        <span>￥0</span>
        <span class="yue">余额</span>
        <!-- <el-divider direction="vertical"></el-divider> -->
      </div>
      <div id="youhuiquan">
        <span>0</span>
        <span class="youhuiquan">优惠券</span>
      </div>
      <div id="xianbi">
        <span>0</span>
        <span class="xianbi">鲜币</span>
      </div>
      <div id="jifenduihuan">
        <span>0</span>
        <span class="jifen">积分兑换</span>
      </div>
    </div>
    <div class="mylist">
      <div class="list">
        <b><span>我的订单</span></b>
        <span @click="AllList()" class="dingdan">全部订单 ></span>
      </div>
      <div class="details">
        <div class="pay" @click="Pay()">
          <span class="iconfont icon-zhifu"></span>
          <h4>待支付</h4>
        </div>
        <div class="pre-sent" @click="Present()">
          <span class="iconfont icon-baoguodingdanpeisong"></span>
          <h4>待配送</h4>
        </div>
        <div class="senting" @click="Senting()">
          <span class="iconfont icon-peisong1"></span>
          <h4>配送中</h4>
        </div>
        <div class="evaluate" @click="Evaluate()">
          <span class="iconfont icon-pingjia"></span>
          <h4>待评价</h4>
        </div>
        <div class="refund" @click="Refund()">
          <span class="iconfont icon-tuikuan"></span>
          <h4>售后/退款</h4>
        </div>
      </div>
    </div>
    <div class="service">
      <div class="myservice">
        <b><span>我的服务</span></b>
      </div>
      <div class="message1">
        <div class="address" @click="Address()">
          <span class="iconfont icon-dizhi"></span>
          <h4>收货地址</h4>
        </div>
        <div class="help" @click="Kefu()">
          <span class="iconfont icon-kefu"></span>
          <h4>客服和帮助</h4>
        </div>
        <div class="setup" @click="Setup()">
          <span class="iconfont icon-shezhi"></span>
          <h4>设置</h4>
        </div>
        <div class="vip">
          <span class="iconfont icon-huiyuan"></span>
          <h4>兑换会员</h4>
        </div>
      </div>
      <div class="message2">
        <div class="recommend1">
          <span class="iconfont icon-scan-fill"></span>
          <h4>推荐有礼</h4>
        </div>
        <div class="shop">
          <span class="iconfont icon-icon-test"></span>
          <h4>积分商城</h4>
        </div>
      </div>
    </div>
    <a-divider>猜你喜欢</a-divider>
    <div class="recommend-all">
      <div
        class="recommend"
        v-for="(item, index) in recommendList"
        :key="index"
      >
        <img :src="item.img" alt="" />
        <p>{{ item.name }}</p>
        <label>{{ item.transport }}</label>
        <div>
          <span>￥{{ item.price / 100 }}</span>
          <a-icon type="plus-circle" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Me",
  data() {
    return {
      recommendList: [],
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo;
    },
  },
  mounted() {
    this.$http
      .get("/work/box-horse/Like.php", {
        params: {
          id: this.$route.query.id,
        },
      })
      .then((res) => {
        this.recommendList = res.data.data;
      })
      .catch((err) => {});
  },
  methods: {
    Address() {
      this.$router.push("/Address");
    },
    Login() {
      this.$router.push("/login");
    },
    Kefu() {
      this.$router.push("/Kefu");
    },
    AllList() {
      this.$router.push("/All");
    },
    Pay() {
      this.$router.push("/Pay");
    },
    Present() {
      this.$router.push("/Present");
    },
    Senting() {
      this.$router.push("/Senting");
    },
    Evaluate() {
      this.$router.push("/Evaluate");
    },
    Refund() {
      this.$router.push("/Refund");
    },
    Address() {
      this.$router.push("/OAddress");
    },
    Setup() {
      this.$router.push("/Setup");
    },
    Xiaoxi() {
      this.$router.push("/Message");
    },
  },
};
</script>
<style lang="scss" scoped>
#userphone {
    margin-top: -22px;
    margin-bottom: 1em;
    margin-left: 68px;
}
.recommend img {
  width: 100px;
  height: 150px;
  margin-left: 10px;
}
#username {
  font-size: 25px;
  padding-left: 20px;
}
.recommend {
  border: 1px solid white;
  border-radius: 10px;
  width: 40%;
  height: 260px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
.recommend label {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  border-radius: 10px;
  font-size: 3px;
  border: 1px solid #FF6347;
  color: #FF6347;
  width: 100px;
  margin-top: -10px;
}
.recommend span {
  color: #FF6347;
}
.recommend i {
  float: right;
  font-size: 20px;
}
.recommend-all {
  display: flex;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  flex-wrap: wrap;
  flex-grow: 2;
  justify-content: space-between;
}
.anticon svg {
  display: inline-block;
  color: #FF6347;
}
.ant-divider-inner-text {
  font-size: 14px;
}
.mine {
  background-color: whitesmoke;
}
.header {
  padding-top: 8px;
  height: 80px;
  background-color: #FF6347;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  color: black;
}
.head-img {
  padding-left: 15px;
}
.head-img a {
  color: black;
  padding-left: 10px;
}
.icon {
  padding-top: 4%;
}
#xiaoxi {
  padding-right: 20px;
}
#kefu {
  padding-right: 20px;
}
.account {
  background-color: white;
  height: 80px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 10px;
}
.yue {
  display: block;
}
.youhuiquan {
  display: block;
}
.xianbi {
  display: block;
}
.jifen {
  display: block;
}
#yue {
  padding-top: 15px;
}
#youhuiquan {
  padding-top: 15px;
}
#xianbi {
  padding-top: 15px;
}
#jifenduihuan {
  padding-top: 15px;
}
.mylist {
  background-color: white;
  height: 150px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 10px;
}
.list {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
}
b {
  font-size: 18px;
  padding-left: 7px;
}
.dingdan {
  font-size: 10px;
  padding-right: 7px;
}
.details {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.pay {
  padding-top: 25px;
}
.pre-sent {
  padding-top: 25px;
}
.senting {
  padding-top: 25px;
}
.evaluate {
  padding-top: 25px;
}
.refund {
  padding-top: 25px;
}
.service {
  height: 200px;
  background-color: white;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 10px;
}
.myservice {
  padding-top: 15px;
  padding-bottom: 20px;
}
.message1 {
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.message2 {
  display: flex;
  justify-content: start;
  padding-left: 18px;
  text-align: center;
}
.shop {
  padding-left: 42px;
}
</style>
